import React, { useState } from 'react'
import { Tabbar } from 'react-vant';
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import { useLocation, useNavigate } from 'react-router-dom';

export default function Tabbars() {

    const tabbarlist = [
        { id: 1, path: '/home', title: '首页', icon: <HomeO /> },
        { id: 2, path: '/fenlei', title: '分类', icon: <Search /> },
        { id: 3, path: '/miquan', title: '米圈', icon: <SettingO /> },
        { id: 4, path: '/car', title: '购物车', icon: <FriendsO /> },
        { id: 5, path: '/my', title: '我的', icon: <SettingO /> },
    ]

    let location = useLocation()
    let navigate = useNavigate()
    let [change, setChange] = useState(location.pathname)

    const changeHandle = (path: any) => {
        navigate(path)
        setChange(path)
    }
    const sb = ()=>{
        let ni = location.pathname
        if(ni.startsWith('/home')){
            return '/home'
        }
        return ni
    }

    return (
        <div className='demo-tabbar'>
            <Tabbar value={sb()} onChange={(e) => {
                changeHandle(e)
            }}>
                {
                    tabbarlist.map(item => {
                        return (
                                <Tabbar.Item key={item.id} icon={item.icon} name={item.path}>
                                    {item.title}
                                </Tabbar.Item>
                        )
                    })
                }

            </Tabbar>
        </div>
    )
}
